<template>
  <a-modal
    :width="modalWidth"
    :visible="visible"
    :title="title"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="取消"
  >
    <a-form
      layout="horizontal"
      :form="form"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 12 }"
      @keyup.enter.native="handleOk"
    >
      <a-form-item label="账户余额(元)">
        <a-input-number class="per100" :min="0" v-decorator="['balance']" disabled />
      </a-form-item>
      <a-form-item label="提现申请金额">
        <a-input-number
          class="per100"
          :min="0"
          v-decorator="['amount', { rules: [{validator: this.amountValidator} ] }]"
        />
      </a-form-item>
      <a-alert type="info" show-icon class="alert-custom">
        <template slot="description" slot-scope="text, record">
          <h3>提现说明：</h3>
          <p>1."提现申请金额"默认为未提现总金额，</p>
          <p>
            2.当选择"提现类型"为<span class="green">「线上提现」</span>时："提现申请金额"必须大于<span class="red"
              >1</span
            >，小于等于<span class="red">5000</span>，
          </p>
          <p>
            3.当选择"提现类型"为<span class="blue">「线下提现」</span>时："提现申请金额"大于<span class="red">0.01</span
            >即可。
          </p>
        </template>
      </a-alert>
    </a-form>
  </a-modal>
</template>

<script>
import { formatAmountFromFenToYuan } from '@/utils/util'
import FundsWithdrawal from '@api/CashManage/FundsWithdrawal'
import { postAction } from '@api/manage'
export default {
  name: 'WithdrawApply',
  data() {
    return {
      title: '提现申请',
      modalWidth: 800,
      visible: false,
      url: {
        sysUserWithdrawal: FundsWithdrawal.sysUserWithdrawal
      },
      record: {},
      form: this.$form.createForm(this),
      formatAmountFromFenToYuan
    }
  },
  created() {},
  methods: {
    // 展示弹窗
    showModal(record) {
      this.visible = true
      this.record = record
      this.$nextTick(() => {
        this.form.setFieldsValue({ balance: record, amount: ''})
      })
    },
     handleOk() {
      this.form.validateFields(async (err, values) =>  {
        if (!err) {
          let that = this
          this.$confirm({
            title: '提现',
            content: '确定要提现吗 ',
            onOk: function () {
              postAction(that.url.sysUserWithdrawal, { withdrawalAmount: values.amount * 100 }).then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.visible = false
                  that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              })
            }
          })
        }
      })
    },
    amountValidator(rule, value, callback){
      if (value) {
        if (value > this.record) {
          callback('提现金额不能大于余额')
        } else {
          callback()
        }
      } else {
        callback('提现金额不能为空')
      }
    },

    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.alert-custom {
  p {
    margin: 0;
  }
  .blue {
    color: #1890ff;
  }
  .green {
    color: #52c41a;
  }

  .red {
    color: #f5222d;
  }
}
</style>

